<template>
	<view class="wx">

		<!-- #ifdef H5 -->
		<view class="tt">
			<Tou></Tou>
		</view>

		<!-- #endif -->
		<!-- 头部宣传 -->
		<scroll-view scroll-y="true" class="main">
			<view class="tou">
				<view class="shang flex">
					<view class="imgs" v-for="(item,index) in imgs.slice(0,2)">
						<image :src="item.url" mode=""></image>

					</view>


				</view>
				<view class="xia flex">
					<view class="ims" v-for="(item,index) in imgs.slice(2)">
						<image :src="item.url" mode=""></image>
					</view>

				</view>
			</view>
			<view class="gongge fl">

				<view class="gouge-item" v-for="(item,index) in jiugong" :key="index">
					<gouge :item="item"></gouge>
				</view>
			</view>
			<view class="nr">
				<!-- 宣传 -->
				<view class="xc fl">
					<view class="xcleft">
						<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
							indicator-color="#666" indicator-active-color=#ffff>
							<swiper-item v-for="(item,index) in lunbo">
								<image :src="'https://ss.lanqb.com/'+item.picture" mode=""></image>
							</swiper-item>

						</swiper>
					</view>
					<view class="xcright">
						<view class="bt">
							<text class="iconfont icon-dianzan1"></text>
							热门推荐
						</view>
						<view class="zi" v-for="(item,index) in gonggao">
							{{item.text}}
						</view>
					</view>

				</view>
				<!-- 热门推荐 -->
				<view class="remen">
					<Biaoti :dixian="true">
						<template v-slot:left>
							<text class="sss  iconfont icon-duanxin"> </text> 热门课程推荐
						</template>
					</Biaoti>
					<view class="list flex">
						<kapai v-for="(item,index) in list" :key="index" :item="item"></kapai>

					</view>
				</view>
				<!-- 主讲人 -->
				<view class="ren">
					<Biaoti :dixian="true">
						<template v-slot:left>
							<text class="sss  iconfont icon-dianzan"> </text> 主讲人大咖老师
						</template>
					</Biaoti>
					<view class="laoshi flex">
						<view class="ls-item" v-for="(item,index) in list1" :key="index">
							<view class="ls-imgs">
								<image :src="'https://ss.lanqb.com/'+item.user.avatar" mode=""></image>

							</view>
							<view class="wen">
								{{item.user.nickname}}
							</view>
							<view class="di">
								<text>行业经验: {{item.seniority}}年</text>

							</view>

						</view>

					</view>
				</view>
			</view>
			<!-- 内容2 -->
			<view class="nr nr2">
				<Biaoti :dixian="true">
					<template v-slot:left>
						<text class="sss  iconfont icon-aixin"> </text> 学员作品展示
					</template>
				</Biaoti>
				<view class="lists3 flex">
					<view class="igs" v-for="(item,index) in list2.slice(0,6)">
						<image :src="'https://ss.lanqb.com/'+item.work_url" mode=""></image>
						<view class="shijian">
							<text class="txt1 iconfont icon-fenxiang">{{item.study_month}}个月学习...</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 内容3 -->
			<view class="nr3 nr">
				<Biaoti :dixian="true">
					<template v-slot:left>
						<text class="sss  iconfont icon-androidgengduo"> </text> 关于蓝铅笔
					</template>
				</Biaoti>
				<view class="tiaozi">
					400万人与你同行 为什么选择蓝铅笔？
				</view>
				<view class="lists fl" v-for="(item,index) in list3" :key="index">
					<view class="lefts">
						{{item.year}}
					</view>
					<view class="xian">

					</view>
					<view class="rights">
						{{item.text}}
						<text class="ziti" v-for="(item,index) in item.gs" :key="item.id">{{item.text}}</text>

					</view>
				</view>
			</view>

		</scroll-view>
		
			
	</view>
</template>

<script>
	import Tou from "@/common/nav-tar.vue"
	import gouge from "@/components/jiugongge.vue"
	import Biaoti from "@/components/wangxiao/biaoti.vue"
	import kapai from "@/components/wangxiao/liebiao.vue"
	// import {gonggao} from "@/components/wangxiao/shuju.js"
	import {
		apis
	} from "@/http/api.js"
	export default {
		data() {
			return {
				imgs: [{
						id: 0,
						url: 'https://assets-cdn.lanqb.com/imgv3_m/shome2211/shb-1-img.png'
					},
					{
						id: 1,
						url: 'https://assets-cdn.lanqb.com/imgv3_m/shome2211/shb-2-img.png?v=221128'
					},
					{
						id: 2,
						url: 'https://assets-cdn.lanqb.com/imgv3_m/shome2211/shb-3-img.png'
					},
					{
						id: 3,
						url: 'https://assets-cdn.lanqb.com/imgv3_m/shome2211/shb-4-img.png'
					},
				],
				jiugong: [{
						id: 0,
						url: 'https://assets-cdn.lanqb.com/imgv3_m/images-icon/submenu/h1-b_2211.png',
						text: '全部课程'
					},
					{
						id: 1,
						url: 'https://assets-cdn.lanqb.com/imgv3_m/images-icon/submenu/h2-o_2211.png',
						text: '直播班'
					},
					{
						id: 2,
						url: 'https://assets-cdn.lanqb.com/imgv3_m/images-icon/submenu/h3-p_2211.png',
						text: '特训班'
					},
					{
						id: 3,
						url: 'https://assets-cdn.lanqb.com/imgv3_m/images-icon/submenu/h4-g_2211.png',
						text: '入门班'
					},
					{
						id: 4,
						url: 'https://assets-cdn.lanqb.com/imgv3_m/images-icon/submenu/h5-p_2211.png',
						text: '学习答问'
					},
					{
						id: 5,
						url: 'https://assets-cdn.lanqb.com/imgv3_m/images-icon/submenu/h6-r_2211.png',
						text: '学员作业'
					},
					{
						id: 6,
						url: 'https://assets-cdn.lanqb.com/imgv3_m/images-icon/submenu/h7-y_2211.png',
						text: '怎样学习'
					},
					{
						id: 7,
						url: 'https://assets-cdn.lanqb.com/imgv3_m/images-icon/submenu/h8-c_2211.png',
						text: '关于我们'
					},
				],
				lunbo: [],
				gonggao: [{
						id: 0,
						text: '坚持学画画,领1200元奖金'
					},
					{
						id: 1,
						text: '30天学会用ipad画插画'
					},
					{
						id: 2,
						text: '学原话,高薪职场必修'
					},
					{
						id: 3,
						text: '坚持学画画,领1200元奖金'
					},
					{
						id: 4,
						text: '坚持学画画,领1200元奖金'
					},
				],
				list: [],
				list1: [],
				list2: [],
				list3: [{
						id: 0,
						year: '2011',
						text: '成立初期',
						gs: [{
							id: 0,
							text: '蓝铅笔社区论坛上线运营'
						}]
					},
					{
						id: 1,
						year: '2014',
						text: '迅速成长',
						gs: [{
								id: 0,
								text: '蓝铅笔社区网校完成天使轮风险投资'
							},
							{
								id: 1,
								text: '蓝铅笔网校兴趣插画类学习项目启动'
							}
						]
					},
					{
						id: 2,
						year: '2016',
						text: '持续攀升',
						gs: [{
								id: 0,
								text: '蓝铅笔学员任治和荣获北美动画师擂台赛冠军'
							},
							{
								id: 1,
								text: '蓝铅笔获得中文在线文化产业基金、华睿资本 投资的千万人民币A轮融资'
							}
						]
					},
					{
						id: 3,
						year: '2018',
						text: '创新发展',
						gs: [{
								id: 0,
								text: '蓝铅笔荣获国家级“高新技术企业”评定'
							},
							{
								id: 1,
								text: '蓝铅笔向国家版权局申获7项软件著作权'
							},
						]
					},
					{
						id: 4,
						year: '2020',
						text: '口碑信任',
						gs: [{
								id: 0,
								text: '蓝铅笔荣获“新浪中国”2020年度影响力艺术教育品牌'
							},
							{
								id: 1,
								text: '蓝铅笔荣获“回响中国”2020年度口碑影响力职业教育品牌'
							}
						]
					},
					{
						id: 5,
						year: '2021',
						text: '口碑信任',
						gs: [{
								id: 0,
								text: '蓝铅笔参与第七届中国品牌创新发展论坛并入选“中国品牌创新发展工程'
							},
							{
								id: 1,
								text: '蓝铅笔创始人参与央视《大国匠心》、《企业家精神》节目录制'
							}

						]
					},
				]
			}

		},
		onLoad() {
			apis.wxlist().then((res) => {
				this.list2 = res[1].data.data
				console.log(res[1].data.data);
			})
			apis.wxlunbo().then((res) => {
				this.lunbo = res[1].data.data

			})
			apis.wxremen().then((res) => {
				this.list = res[1].data.data

			})
			apis.wxzhujiang().then((res) => {
				this.list1 = res[1].data.data
				// console.log(res[1].data.data);
			})

		},
		methods: {

		},
		components: {
			Tou,
			gouge,
			Biaoti,
			kapai,

		}
	}
</script>

<style lang="scss" scoped>
	.wx {
		background-color: #eee;

	}

	

	.tt {

		background-color: #fff;

	}

	.tou {
		width: 100vw;
		height: 388rpx;
		box-sizing: border-box;

		padding: 22rpx 20rpx 40rpx;
		background: url(https://assets-cdn.lanqb.com/imgv3_m/shome2211/shb-bg.png) no-repeat 50%;
		background-size: 100% 100%;

		.shang {
			margin-bottom: 20rpx;

			.imgs {
				width: 344rpx;
				height: 216rpx;

				border-radius: 5rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;

				}
			}

		}

		.xia {
			.ims {
				width: 344rpx;
				height: 90rpx;

				border-radius: 5rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.gongge {
		width: 100%;
		padding: 10rpx 0rpx;
		background-color: #fff;

		// height: 330rpx;

		flex-wrap: wrap;

		.gouge-item {
			width: 25%;


		}
	}

	.nr {
		padding: 30rpx 20rpx 0;
		margin-top: 40rpx;
		background-color: #fff;

		.xc {
			width: 100%;
			height: 496rpx;

			margin-bottom: 20rpx;

			.xcleft {
				width: 354rpx;
				height: 100%;
				;

				swiper {

					width: 100%;
					height: 100%;


				}

				swiper-item {


					image {
						width: 100%;
						height: 100%;

					}
				}

			}

			.xcright {
				margin-left: 20rpx;

				.bt {
					font-weight: 500;
					font-size: 33rpx;
					line-height: 44rpx;
				}

				.zi {
					width: 356rpx;
					line-height: 60rpx;
					padding: 0 10rpx;
					box-sizing: border-box;
					color: #87959f;
					font-size: 24rpx;
					font-weight: 400;
					overflow: hidden;
					white-space: nowrap;

					text-overflow: ellipsis;
					background-color: #fbfbfb;
					border-radius: 5rpx;
					margin-bottom: 10rpx;

				}
			}
		}

		.remen {
			.sss {
				margin-right: 10rpx;
			}

			.list {
				flex-wrap: wrap;
			}
		}

		.laoshi {
			width: 100%;
			height: 302rpx;
			padding: 10rpx 0;
			box-sizing: border-box;

			.ls-item {
				text-align: center;
				width: 33%;
				height: 262rpx;

				.ls-imgs {
					width: 168rpx;
					height: 168rpx;
					margin: auto;
					border-radius: 50%;
					overflow: hidden;
					margin-bottom: 12rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.wen {
					font-size: 32rpx;
					margin-bottom: 5rpx;
				}

				.di {
					font-size: 24rpx;
					color: #999;
				}
			}
		}
	}

	.nr2 {
		margin-top: 18rpx;

		.lists3 {
			flex-wrap: wrap;

			.igs {
				margin-bottom: 20rpx;
				position: relative;
				width: 220rpx;
				height: 280rpx;
				border-radius: 14rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}

				.shijian {
					position: absolute;
					top: 5rpx;
					left: 6rpx;
					width: 200rpx;
					height: 40rpx;

					padding: 2rpx 5rpx;
					background-color: rgba(0, 0, 0, .4);
					color: #fff;

					line-height: 40rpx;

					text {
						font-size: 12rpx;
					}
				}
			}
		}
	}

	.nr3 {
		margin-top: 20rpx;
		padding-bottom:60rpx ;

		.tiaozi {
			margin: 34rpx auto 56rpx;
			width: 660rpx;
			height: 80rpx;

			text-align: center;
			font-size: 33rpx;
			color: #fff;
			background-color: #457eec;
			border-radius: 12rpx;
			line-height: 80rpx;
		}

		.lists {
			width: 100%;
			margin-bottom: 60rpx;
			color: #457eec;
			font-size: 34rpx;

			.xian {
				width: 16rpx;
				height: 16rpx;
				font-size: 60rpx;
				border: 1px solid #000;
				border-radius: 50%;
				box-sizing: border-box;
				margin: 20rpx 20rpx;
				position: relative;

			}

			.xian::after {
				position: absolute;
				top: 5rpx;
				left: 5rpx;
				display: block;

				content: "";
				width: 3rpx;
				height: 255rpx;
				background-color: #457eec;

			}

			.ziti {
				display: block;
				color: #707070;
				font-weight: 400;
				font-size: 26rpx;
				line-height: 36rpx;
			}
		}

		.lists:last-child {
			.xian::after {
				position: absolute;
				top: 5rpx;
				left: 5rpx;
				display: block;

				content: "";
				width: 1rpx;
				height: 1rpx;
				background-color: #fff;

			}
		}

	}
</style>
